<template>
  <van-sticky :offset-top="0">
    <navbar title="首页" />
    <div class="search-box">
      <van-search v-model="value" show-action placeholder="请输入搜索关键词" @search="onSearch">
        <template #action>
          <!-- <div @click="onClickButton" class="search-button">筛选</div> -->
        </template>
      </van-search>
      <van-dropdown-menu>
        <van-dropdown-item v-model="value1" :options="option1" />
      </van-dropdown-menu>
    </div>
  </van-sticky>
  <van-list :loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
    <div class="card" v-for="item in list" :key="item" :title="item">
      <van-icon dot class="card-icon" />
      <div class="card-content">{{ item }}</div>
      <div class="card-action">
        <span>海事局</span>
        <span>2021-01-01</span>
      </div>
      <div class="card-line">
        <van-button type="primary" size="small">查看详情</van-button>
      </div>
    </div>
  </van-list>
  <tabbar />
</template>
<script setup lang="ts">
import navbar from '@/components/navbar.vue'
import tabbar from '@/components/tabbar.vue'

import { ref } from 'vue'
import { showToast } from 'vant'

const list = ref([])
const loading = ref(false)
const finished = ref(false)
// defineProps<{ msg: string }>()
const value = ref('')
const value1 = ref(0)
const onSearch = (val) => showToast(val)
const onClickButton = () => showToast('取消')
const option1 = [
  { text: '全部', value: 0 },
  { text: '已读', value: 1 },
  { text: '未读', value: 2 }
]
const onLoad = () => {
  // 异步更新数据
  // setTimeout 仅做示例，真实场景中一般为 ajax 请求
  setTimeout(() => {
    for (let i = 0; i < 10; i++) {
      list.value.push(list.value.length + 1)
    }

    // 加载状态结束
    loading.value = false

    // 数据全部加载完成
    if (list.value.length >= 40) {
      finished.value = true
    }
  }, 1000)
}
</script>
<style scoped lang="scss">
.card {
  color: #888;
  font-size: 14px;
  border: 1px solid #ddd;
  margin: 10px;
  border-radius: 10px;
  position: relative;

  &-content {
    padding: 10px;
  }

  .card-icon {
    position: absolute;
    top: 1px;
    right: 1px;
  }

  &-action {
    display: flex;
    padding: 10px;
    font-size: 13px;
    justify-content: space-between;
  }

  &-line {
    display: flex;
    justify-content: flex-end;
    padding: 10px;
    border-top: 1px solid #ddd;
  }
}

.search-box {
  display: flex;
  align-items: center;
  background: #fff;
  .van-search {
    width: 100%;
  }
  padding-right: 10px;
}
:deep(.van-dropdown-menu__bar) {
  box-shadow: none !important;
}
.search-button {
  background-color: #1989fa;
  color: #fff;
  border-radius: 10px;
  padding: 0 10px;
}
</style>
